<template>
	<view class="container">
		<view class="header">
			<text class="title">幸运大转盘</text>
			<text class="subtitle">剩余抽奖次数：{{chances}}次</text>
		</view>
		
		<view class="wheel-container">
			<view class="wheel" :style="{ transform: `rotate(${rotateAngle}deg)` }">
				<view class="wheel-item" v-for="(item, index) in prizes" :key="index"
					:style="{ transform: `rotate(${index * (360 / prizes.length)}deg)` }">
					<text class="prize-name">{{item.name}}</text>
					<text class="prize-value">{{item.value}}</text>
				</view>
			</view>
			<view class="pointer" @click="startRotate"></view>
		</view>
		
		<view class="rules">
			<text class="rules-title">活动规则</text>
			<view class="rules-content">
				<text>1. 每人每天有3次抽奖机会</text>
				<text>2. 中奖后请及时领取奖品</text>
				<text>3. 奖品将在24小时内发放</text>
				<text>4. 最终解释权归本店所有</text>
			</view>
		</view>
		
		<view class="my-prizes" v-if="myPrizes.length > 0">
			<text class="prizes-title">我的奖品</text>
			<view class="prizes-list">
				<view class="prize-item" v-for="(prize, index) in myPrizes" :key="index">
					<text class="prize-name">{{prize.name}}</text>
					<text class="prize-value">{{prize.value}}</text>
					<text class="prize-status" :class="prize.status">{{prize.statusText}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 奖品配置
const prizes = ref([
	{ name: '88元红包', value: '88元' },
	{ name: '66元红包', value: '66元' },
	{ name: '50元红包', value: '50元' },
	{ name: '30元红包', value: '30元' },
	{ name: '20元红包', value: '20元' },
	{ name: '10元红包', value: '10元' },
	{ name: '5元红包', value: '5元' },
	{ name: '谢谢参与', value: '0元' }
])

// 我的奖品
const myPrizes = ref([
	{
		name: '88元红包',
		value: '88元',
		status: 'pending',
		statusText: '待领取'
	},
	{
		name: '50元红包',
		value: '50元',
		status: 'received',
		statusText: '已领取'
	}
])

// 转盘相关
const chances = ref(3)
const rotateAngle = ref(0)
const isRotating = ref(false)

// 开始旋转
const startRotate = () => {
	if (isRotating.value || chances.value <= 0) return
	
	isRotating.value = true
	chances.value--
	
	// 随机选择奖品
	const prizeIndex = Math.floor(Math.random() * prizes.value.length)
	const targetAngle = 360 - (prizeIndex * (360 / prizes.value.length))
	
	// 计算旋转角度（多转几圈）
	const extraRotations = 5 // 额外旋转圈数
	const finalAngle = targetAngle + (360 * extraRotations)
	
	// 设置旋转动画
	rotateAngle.value = finalAngle
	
	// 动画结束后显示中奖信息
	setTimeout(() => {
		isRotating.value = false
		uni.showModal({
			title: '恭喜中奖',
			content: `您获得了${prizes.value[prizeIndex].name}`,
			showCancel: false
		})
		
		// 添加到我的奖品
		myPrizes.value.unshift({
			name: prizes.value[prizeIndex].name,
			value: prizes.value[prizeIndex].value,
			status: 'pending',
			statusText: '待领取'
		})
	}, 4000)
}

// 页面加载时获取数据
onMounted(() => {
	// TODO: 从服务器获取抽奖次数和我的奖品
})
</script>

<style>
.container {
	padding: 20rpx;
	background-color: #F5F5F5;
	min-height: 100vh;
}

.header {
	padding: 40rpx 20rpx;
	text-align: center;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 24rpx;
	color: #666;
}

.wheel-container {
	position: relative;
	width: 600rpx;
	height: 600rpx;
	margin: 40rpx auto;
}

.wheel {
	width: 100%;
	height: 100%;
	position: relative;
	border-radius: 50%;
	background-color: #FFFFFF;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
	transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

.wheel-item {
	position: absolute;
	width: 50%;
	height: 50%;
	transform-origin: 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20rpx;
	box-sizing: border-box;
}

.prize-name {
	font-size: 24rpx;
	color: #333;
	margin-bottom: 4rpx;
}

.prize-value {
	font-size: 20rpx;
	color: #D02B29;
}

.pointer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100rpx;
	height: 100rpx;
	background-color: #D02B29;
	border-radius: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: 28rpx;
	font-weight: bold;
}

.pointer::before {
	content: '';
	position: absolute;
	top: -20rpx;
	left: 50%;
	transform: translateX(-50%);
	border-left: 20rpx solid transparent;
	border-right: 20rpx solid transparent;
	border-bottom: 40rpx solid #D02B29;
}

.rules {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.rules-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.rules-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.8;
}

.rules-content text {
	display: block;
}

.my-prizes {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.prizes-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.prize-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.prize-item:last-child {
	border-bottom: none;
}

.prize-item .prize-name {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.prize-item .prize-value {
	font-size: 28rpx;
	color: #D02B29;
	margin: 0 20rpx;
}

.prize-status {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.prize-status.pending {
	color: #D02B29;
	background-color: #FFE4E4;
}

.prize-status.received {
	color: #999;
	background-color: #F5F5F5;
}
</style> 